import React from 'react';
import {Card, Image, message} from "antd";
import style from './MyCard.module.scss'
import {timestampToTime} from "../../utils/dateTimeUtlis";
import {setViewAndComment} from "../../api/publicApi";
import {useNavigate} from "react-router-dom";
import {fallback} from "../../publicFIle/backupData";

// 目录card
function MyCard(props) {
    const Navigate = useNavigate()
    const imgUrl = props.item.blogCoverImage || fallback

    const goToMyNotes = () => {
        Navigate('/HomePage/BlogArticle?id=' + props.item.id)
        setViewAndComment({blogId: props.item.id, setType: '1'}).catch(e => {
            message.error('浏览量错误')
        })
    }

    return (
        <div className={style.MyCard} onClick={goToMyNotes}>
            <Card
                style={{
                    width: 300,
                }}
                bordered={true}
                cover={
                    <div className={style.divView}>
                        <Image
                            width={'100%'}
                            height={'100%'}
                            src={imgUrl}
                            fallback={fallback}
                            preview={false}
                        />
                    </div>
                }
                actions={[
                    <div>
                        <i className="iconfont icon-shijian" style={{color: '#96EBE2', margin: '0.1rem'}}></i>
                        <span>{timestampToTime(new Date(props.item.updatedAt).getTime())}</span>
                    </div>,
                    <div>
                        <i className="iconfont icon-pinglun-copy-copy" style={{color: '#FFD666', margin: '0.1rem'}}></i>
                        <span>{props.item.blogCommentNumber}</span>
                    </div>,
                    <div>
                        <i className="iconfont icon-lliulan" style={{color: '#1890FF', margin: '0.1rem'}}></i>
                        <span>{props.item.blogPageView}</span>
                    </div>,
                ]}
            >
                <div style={{marginTop: "10px", fontSize: "0.8rem", color: '#0099FF', margin: '0.1rem'}}>
                    {props.item.blogTitle}
                </div>
                <div style={{marginTop: "10px", fontSize: "0.6rem", overflow: 'hidden', textOverflow: "ellipsis"}}>
                    {props.item.blogCoverTitle}
                </div>
                <div style={{marginTop: "10px", fontSize: "0.5rem", color: '#66CCDC'}}>
                    标签:{props.item.blogTypeNameK}
                </div>
            </Card>
        </div>
    );
}

export default MyCard;
